<template>
	<div class="web-content">
		<!-- 轮播图 -->
		<div class="banner-box">
			<div id="myCarousel" class="carousel slide">
				<div class="carousel-inner">
					<div class="item active imrating-banner">
						<div class="banner-img-box-content">
							<img src="../assets/images/banner.png" alt="Banner">
							<div class="text-content-im">
								<div class="text-cont">
									<h2>数据驱动<br>专业评级</h2>
									
								</div>
							</div>
						</div>
						<div class="banner-bottom">
							<div class="container">
								<div class="bootom-bottom">
									<div class="row">
									  <div class="col">
										  <h3 class="h3-clors timer" id="count-number" data-to="2100" data-speed="1500">2,100种</h3>
										  <h4 class="h4-text">加密货币</h4>
									  </div>
									  <div class="col">
										  <h3 class="h3-clors timer"  id="count-numbers" data-to="821593" data-speed="1500">821593份</h3>
										  <h4 class="h4-text">市场信息和数据</h4>
									  </div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 优势 -->
		<web-advantage></web-advantage>
		<!-- title -->
		<web-box-title :title="title[0]" ></web-box-title>
		<!-- 评级维度 -->
		<web-dimension></web-dimension>
		<!-- title -->
		<web-box-title :title="title[1]"></web-box-title>
		<!-- 合作机构 -->
		<web-cooperation></web-cooperation>
		<!-- title -->
		<web-box-title :title="title[2]"></web-box-title>
		<!-- 专业顾问 -->
		<web-advis-team></web-advis-team>
	</div>
</template>
<script>
	import {start} from '../gloab/number.js'
	import Advantage from '../components/index/Advantage.vue'
	import BoxTitle from '../components/index/BoxTitle.vue'
	import Dimension from '../components/index/Dimension.vue' //五个维度
	import Cooperation from '../components/index/Cooperation.vue' //合作机构
	import Silder from '../components/index/Silder.vue'
	export default{
		data:function(){
			return{
				title:['评级维度','合作机构','专业顾问']
			}
		},
		components:{
			'web-advantage':Advantage,
			'web-box-title':BoxTitle,
			'web-dimension':Dimension,
			'web-cooperation':Cooperation,
			'web-advis-team':Silder
		},
		created(){
			this.$nextTick(()=>{
				this.getlocal()
			})
		},
		mounted:function(){
			let calssName = 'timer';
			start(calssName);
		},
		methods: {
			getlocal() {
				let select = localStorage.getItem("id");
				let anchor = document.getElementById(select);
				if(select){
				
					$('html,body').animate({scrollTop: $("#"+localStorage.getItem("id")).offset().top-200}, 500);
					localStorage.setItem('id',null)

				}
			}
		},
	}
</script>
<style scoped="scoped">
	.banner-img-box-content{
		position: relative;
		width: 100%;
	}
	.text-content-im{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.text-cont{
		color: #FFFFFF;
		font-size: 80px;
	}
	.text-cont h2{
		margin-top: 150px;
		font-size: 80px;
	}
	.bootom-bottom{
		width: 100%;
		margin: 30px 0;
	}
	.bootom-bottom .row .col:first-child{
		border-right: 2px solid #333;
	}
	.h4-text{
		font-size: 16px;
		color: #d2d2d2;
	}
	.h3-clors{
		font-size: 40px;
		color: #f7931e;
		margin-bottom: 25px;
	}
	.banner-box{
		width: 100%;
		height: 100%;
	}
	.imrating-banner{
		position: relative;
		width: 100%;
	}
	.imrating-banner img{
		width: 100%;
		height: 680px;
	}
	.banner-bottom{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #00021180;
	}
	@media screen and (max-width: 768px) {
		.imrating-banner img{
			height: 300px;
		}
		.h3-clors{
			font-size: 24px;
		}
		.text-cont h2{
			margin-top: 50px;
			font-size: 32px;
		}
	}
</style>